<template>
	<div class="message">
		<div class="title">
			{{loadData.name}}
		</div>
		<van-divider />
		<div class="content">
			<div class="list">
				<div class="name">标题：</div>
				<van-cell-group>
					<van-field v-model="title" placeholder="单行输入" :border='false' />
				</van-cell-group>
			</div>
			<div class="list area">
				<div class="name">留言内容：</div>
				<van-cell-group>
					<van-field v-model="messagecontent" placeholder="为利于你所提意见建议得到及时有效处理，请写清时间、地点、事件" :autosize="oo" type="textarea" :border='false' />
				</van-cell-group>
			</div>
			<div class="list code">
				<div class="name">验证码：</div>
				<van-cell-group>
					<van-field v-model="captcha" placeholder="必填" :border='false' />
				</van-cell-group>
				<img :src="images" alt="" v-if="showImg">
				<span v-if="!showImg" class="exchange">登录后获取验证码</span>
				<span v-if="showImg" class="exchange" @click="changeUrl">换一换</span>
			</div>
			<div class="button-sub">
				<van-button type="primary" block color="#FE7700" round @click="subInfo">提交</van-button>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: "Message",
		components: {

		},
		data() {
			return {
				value: '',
				oo: {
					minHeight: 170
				},
				images:"",
				userInfo:{},
				loadData:{},
				title:'',
				messagecontent:'',
				captcha:'',
				flag:1,
				showImg:false
			}
		},
		mounted() {
			this.userInfo = JSON.parse(this.$getcookie("userInfo"))
			this.loadData = this.$localStorage.get("secondLevel")
			if(this.$getcookie("jy_token") == null){
				this.showImg = false
				this.images = ''
			}else{
				this.showImg = true
				this.images = 'http://home.tangmu.xin/api/user/captcha/?token='+this.$getcookie("jy_token")
			}
		},
		methods:{
			changeUrl(){
				this.images = 'http://home.tangmu.xin/api/user/captcha/?token='+this.$getcookie("jy_token")+'&time='+new Date()
				this.flag++
			},
			subInfo(){
				let sendData = {
					title:this.title,
					messagecontent:this.messagecontent,
					captcha:this.captcha,
					type:this.loadData.targetdata,
					site_id:this.loadData.site_id,
					token:this.$getcookie("jy_token")
				}
				this.$api.home.guest(sendData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.$toast.success(res.msg)
					}else{
						this.$toast.fail(res.msg)
					}
				
				})
			}
		}


	}
</script>

<style lang="less">
	.message {
		padding: 1.13rem 0.78rem;
		background: #fff;

		.title {
			font-size: 0.94rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(38, 38, 38, 1);
		}

		.content {
			padding: 0 .38rem;

			.list {
				margin-bottom: 1.47rem;

				.name {
					font-size: 0.88rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(38, 38, 38, 1);
					margin-bottom: 0.97rem;
				}

				.van-uploader__input-wrapper {
					width: 100%;
				}



				.van-cell {
					width: 100%;
					min-height: 2.56rem;
					border: 1px solid rgba(191, 191, 191, 1);
					border-radius: 0.5rem;
					line-height: 1;

					.van-field__control {
						&::placeholder {
							font-size:0.75rem;
							font-family:PingFang SC;
							font-weight:500;
							color:rgba(186,186,186,1);
							line-height: 1.2;
						}

					}
				}

				.van-hairline--top-bottom::after,
				.van-hairline-unset--top-bottom::after {
					display: none;
				}

				.van-radio-group {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;

					.van-radio {
						width: 50%;
						margin-bottom: 1.63rem;


					}

					.van-radio__label {
						font-size: 0.88rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(131, 131, 131, 1);
					}

				}

				.align {
					width: 100%;
					display: flex;
					justify-content: center;
				}
			}

			.area {

				.van-cell {
					padding: 1.56rem 0.81rem;
				}
			}
			.code{
				display: flex;
				align-items: center;
				.name{
					margin-bottom: 0;
				}
				.van-cell{
					width: 8.88rem;
				}
				.exchange{
					font-size:0.88rem;
					font-family:PingFang SC;
					font-weight:500;
					text-decoration:underline;
					color:rgba(254,119,0,1);
					margin-left: 0.5rem;
				}
				img{
					width: 8rem;
				}
			}
			.button-sub{
				width: 100%;
				margin: 3.28rem auto;
			}
			.van-button{
				height: 3.06rem;
				font-size:0.94rem;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(255,255,255,1);
				line-height: 3.06rem;
			}
		}
	}
</style>
